<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信用户绑定</title>
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="js/common.js"></script>
    <style>
        .myDiv{
            width: 400px;
            height: 300px;
            float: right;
            border: 1px solid #5c5c5c;
            background: white;
            margin-right: 100px;
            margin-top: 100px;
        }
        .inputDiv{
            height: 80px;
            line-height: 80px;
            margin-left: 40px;
        }
        .inputDiv .input{
            height: 30px;
            width: 200px;
        }
        .btnInput{
            height: 30px;
            width: 100px;
        }
    </style>
</head>
<body style="background:pink">
<div class="myDiv">
    <form class="registForm">
        <div>
            <div class="inputDiv">
                <input class="input" name="mobile" v-model="formParams.mobile" type="text" value="" placeholder="请输入要绑定的手机号">
            </div>
            <div class="inputDiv">
                <input class="input left" type="text" value="" v-model="formParams.verifyCode" name="verify" placeholder="输入验证码" />
                <div id="send" style="display: inline;">
                    <input class="btnInput" type="button" @click="getSmsCode($event)" value="获取验证码"/>
                </div>
            </div>
        </div>
        <div class="login-button" style="text-align: center">
            <input type="button" class="btnInput" @click="bind" value="绑定" class="fM"  />
        </div>
    </form>
</div>
<script type="text/javascript">
    new Vue({
        el:".myDiv",
        data:{
            formParams:{
                mobile:"",
                verifyCode:"",
                accessToken:"",
                openid:""
            }
        },
        methods:{
            getSmsCode(event){
                //1.判断手机号不为空
                if(!this.formParams.mobile){
                    alert("手机号不能为空");
                    return;
                }
                //2.获取按钮，禁用按钮
                var sendBtn = $(event.currentTarget);
                sendBtn.attr("disabled",true);

                //3.发送ajax请求
                this.$http.post("/verifyCode/sms/binder",this.formParams).then(res=>{
                    var ajaxResult = res.data;
                    if(ajaxResult.success){
                        alert("手机验证码已经发送到您的手机，请在5分钟内使用");
                        //3.1.发送成：倒计时
                        var time = 60;
                        var interval = window.setInterval( function () {
                            //每一条倒计时减一
                            time = time - 1 ;
                            //把倒计时时间搞到按钮上
                            sendBtn.val(time+"秒后重发");

                            //4.2.倒计时完成恢复按钮
                            if(time <= 0){
                                sendBtn.val("重新发送");
                                sendBtn.attr("disabled",false);
                                //清除定时器
                                window.clearInterval(interval);
                            }
                        },1000);
                    }else{
                        //3.3.发送失败：提示，恢复按钮
                        sendBtn.attr("disabled",false);
                        alert("发送失败:"+ajaxResult.message);
                    }
                })
            },
            bind(){
                // 1 参数校验 手机号,验证码
                if (!this.formParams.mobile){
                    alert("电话号码不能为空！")
                    return;
                }
                if (!this.formParams.verifyCode){
                    alert("验证码不能为空！")
                    return;
                }
                // 2 发送请求到后端,做账号绑定
                this.$http.post("/user/bind/wechat",this.formParams)
                    .then(result => {
                        console.log(result.data);
                        result = result.data;
                        if(result.success){
                            // 绑定成功:登录成功,需要跳转到首页
                            alert("登录成功!");
                            let {token,loginInfo} = result.result;
                            localStorage.setItem("loginInfo",JSON.stringify(loginInfo));
                            localStorage.setItem("token",token);
                            // 直接跳转到首页
                            location.href="/index.html";
                        }else{
                            alert("绑定失败!"+result.message);
                        }
                    })
            }
        },
        mounted(){
            // 解析url并赋值
            let paramObj = str2Obj(location.href);
            this.formParams.accessToken = paramObj.accessToken;
            this.formParams.openid = paramObj.openid;
        }
    })
</script>
</body>
</html>